<template lang="html">
  <div class="addGroupBox">
    <el-row>
      <el-col :span="4" class="text-right">
        礼物名称：
      </el-col>
      <el-col :span="9" >
        <el-input v-model="title" size="small" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="4" class="text-right">
        礼物类型：
      </el-col>
      <el-col :span="9">
        <el-select v-model="type" style="width:100%;" clearable size="small" placeholder="类型">
          <el-option
            v-for="item in productType"
            :key="item.value"
            :label="item.name"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;" v-show="type==1">
      <el-col :span="4" class="text-right">
        选择产品：
      </el-col>
      <el-col :span="9">
        <el-select v-model="productId" style="width:100%;" clearable size="small" placeholder="类型">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.title"
            :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="11" class="text-left">
        <span style="font-size:12px; padding-left:10px;" class="gray">要求赠送的产品是单一规格</span>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;" v-show="type==3">
      <el-col :span="4" class="text-right">
        返现金额：
      </el-col>
      <el-col :span="9">
        <el-input placeholder="请输入内容" size="small" v-model="cashAmount">
          <template slot="append">元</template>
        </el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;" v-show="type==2">
      <el-col :span="4" class="text-right">
        优惠券ID：
      </el-col>
      <el-col :span="9">
        <el-input placeholder="请输入内容" size="small" v-model="couponId">
        </el-input>
      </el-col>
      <el-col :span="11" class="text-left">

      </el-col>
    </el-row>

    <el-row style="margin-top:10px;">
      <el-col :span="4" class="text-right">
        微信推送主内容：
      </el-col>
      <el-col :span="9">
        <el-input v-model="tplMsgContent" size="small" placeholder="请输入内容"></el-input>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px;">
      <el-col :span="4" class="text-right">
        微信推送链接：
      </el-col>
      <el-col :span="9">
        <el-input v-model="tplMsgUrl" size="small" placeholder="请输入内容"></el-input>
      </el-col>
      <el-col :span="11" class="text-left">
        <span style="font-size:12px; padding-left:10px;" class="gray">请填写 http:// 完整链接</span>
      </el-col>
    </el-row>

    <el-row style="margin-top:10px;">
      <el-col :span="3" :offset="4" class="text-left">
        <el-button size="small" type="success" @click="sub">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var url;

export default {
  props:{
    creatType:{
      dialogVisible:Boolean,
      dialogVisible2:Boolean
    }
  },
  data(){
    return {
      cashAmount:'',
      couponId:'',
      productId:'',
      title:'',
      tplMsgContent:'',
      tplMsgUrl:'',
      type:'',
      options: [],
     productType:[{name:'送产品',value:1},{name:'优惠券',value:2}]
    }
  },
  methods:{
    sub:function (){
      var that = this;
      axios.get(url+"/v1/marketing/tuanGift/prize/add",{
        params:{
          cashAmount:that.cashAmount,
          couponId:that.couponId,
          productId:that.productId,
          title:that.title,
          tplMsgContent:that.tplMsgContent,
          tplMsgUrl:that.tplMsgUrl,
          type:that.type
        }
      }).then((res)=>{
        if(res.data.code==0){
          that.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          });
          that.creatType.dialogVisible=false;
          var json = {
            pageCount:10,
            pageIndex:1,
            title:''
          }
          that.$store.dispatch('getActivityGiftConfigList',json);
        }
      })
    },
    getProductList:function(){
      var that = this;
      axios.get(url+"/v1/product/getProductsWithOneSku",{
        params:{

        }
      }).then((res)=>{
        that.options=res.data.data;
        //console.log(res.data)
      })
    },
  },
  created(){
    url=this.$store.state.url;
    this.getProductList();
  }
}
</script>
<style>
  .addGroupBox .el-input__inner{ padding-right: 15px;}
  .addGroupBox .el-input__icon{width:25px;}
</style>
<style lang="Sass" scoped>
  .addGroupBox{}
</style>
